<template>
  <div>
    <div class="box">
      <div class="topBar">
        <el-form
          ref="queryForm"
          :model="queryForm"
          :inline="true"
          class="search-form"
        >
          <div>
            <el-form-item
              label="债券名称"
              label-width="80px"
              class="bondName"
              style="margin-right: 40px"
            >
              <el-input v-model="queryForm.bondName"></el-input>
            </el-form-item>
            <el-form-item label="债券编号" label-width="82px">
              <el-input
                v-model="queryForm.bondCode"
                class="bondCode"
              ></el-input>
            </el-form-item>
            <el-form-item label="息票率" class="ticketRate" label-width="110px">
              <el-input v-model="queryForm.couponL"></el-input>
              <span style="color: #fff"> ~ </span>
              <el-input v-model="queryForm.couponH"></el-input>
            </el-form-item>
          </div>
          <br />
          <el-form-item
            label="交易日"
            label-width="80px"
            style="margin-right: 40px"
          >
            <el-date-picker
              v-model="queryForm.date"
              type="daterange"
              range-separator="-"
              value-format="yyyyMMdd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item
            label="风险偏好值"
            class="ticketRate"
            style="margin-right: 38px"
          >
            <el-input v-model="queryForm.riskNumL"></el-input>
            <span style="color: #fff"> ~ </span>
            <el-input v-model="queryForm.riskNumH"></el-input>
          </el-form-item>
          <el-form-item label="偏好评估法" class="region">
            <el-select
              v-model="queryForm.evaluationMethod"
              placeholder="请选择偏好评估法"
            >
              <el-option
                v-for="item in selectList"
                :key="item.value"
                :label="item.value"
                :value="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <br />
          <el-form-item style="text-align: right; width: 100%">
            <el-button type="primary" class="btn" @click="searchBtn(1)"
              >查询</el-button
            >
            <el-button type="primary" class="btn" @click="resetFn"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="bottomInfo">
        <div class="bondCardTitle">风险偏好明细</div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" label="序号" align="center">
          </el-table-column>
          <el-table-column prop="bondId" label="债券编号" align="center">
          </el-table-column>
          <el-table-column prop="bondFName" label="债券名称" align="center">
          </el-table-column>
          <el-table-column prop="bondSName" label="债券简称" align="center">
          </el-table-column>
          <el-table-column label="息票率" :formatter="xplFn" align="center">
          </el-table-column>
          <el-table-column
            label="对照时间段"
            :formatter="dateFn"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="riskAttitudeNm"
            label="风险偏好值"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="assessMethod"
            label="偏好评估法"
            align="center"
          >
          </el-table-column>
        </el-table>
        <el-pagination
          small
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="pageFn"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { bondRiskDetail } from "@/api/bondRiskAppetite/index.js";
import { getDictItems } from "@/api/common/index.js";

export default {
  data() {
    return {
      queryForm: {
        bondName: "",
        bondCode: "",
        couponL: "",
        couponH: "",
        riskNumL: "",
        riskNumH: "",
        evaluationMethod: "",
        beginDate: "",
        endDate: "",
      },
      selectList: [],
      tableData: [],
      total: 0,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async searchBtn(page) {
      if (!this.queryForm.data) {
        this.queryForm.data = ["", ""];
      }
      const param = {
        ...this.queryForm,
        pn: 10,
        page: page,
        beginDate: this.queryForm.data[0],
        endDate: this.queryForm.data[1],
      };
      delete param.data;
      console.log(param, "param");
      let res = await bondRiskDetail(param);
      this.tableData = res.data.result;
      this.total = Number(res.data.totalResults);
      console.log(res, "123");
    },
    dateFn(row) {
      return row.asseseOpenTime + "~" + row.asseseCloseTime;
    },
    xplFn(row) {
      return row.couponRate + "%";
    },
    resetFn() {
      this.queryForm = {
        bondName: "",
        bondCode: "",
        couponL: "",
        couponH: "",
        riskNumL: "",
        riskNumH: "",
        evaluationMethod: "",
        beginDate: "",
        endDate: "",
        data: [],
      };
    },
    pageFn(currentPage) {
      this.searchBtn(currentPage);
    },
    init() {
      getDictItems().then((res) => {
        console.log(res, "resresres");
        this.filterData(res.data);
      });
    },
    filterData(arr) {
      arr.forEach((v) => {
        if (v.children && JSON.stringify(v.children) !== "[]") {
          this.filterData(v.children);
        }
        if (v.typeGroupCode == "Assess_method") {
          this.selectList.push(v);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  height: 100%;

  .topBar {
    background-color: #262d47;
    margin-bottom: 10px;
    padding: 20px 20px;
    padding-bottom: 10px;
  }

  .bottomInfo {
    flex: 1;
    width: 100%;
    background-color: #262d47;
    padding-bottom: 20px;
  }

  .el-pagination {
    text-align: right;
    margin-top: 10px;
  }

  .ticketRate ::v-deep {
    .el-input {
      width: 100px;
    }

    .el-input__inner {
      width: 100%;
    }
  }

  .bondCode ::v-deep {
    .el-input__inner {
      width: 220px;
    }
  }

  .bondName ::v-deep {
    .el-input {
      width: 240px;
    }

    .el-input__inner {
      width: 100%;
    }
  }

  .bondNo ::v-deep {
    .el-input {
      width: 218px;
    }

    .el-input__inner {
      width: 100%;
    }
  }

  .region ::v-deep {
    .el-input {
      width: 222px;
    }

    .el-input__inner {
      width: 100%;
    }
  }

  .el-table {
    min-height: 440px;
  }

  .el-table ::v-deep th.el-table__cell {
    background-color: #1c2238 !important;
    color: #fff;
  }

  .tableBox {
    background-color: #262d47;
    flex: 1;
    padding: 15px 10px;
  }

  .bondCardTitle {
    height: 40px;
    background: #354060;
    font-size: 14px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #ffffff;
    padding: 10px 16px;
  }
}
</style>
